<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册界面</title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
		</script>
		<script>
			$(function () {
			    // 定义开关变量
			    var flagUser=false
			    var flagPwd=false
			    var flagCpwd=false
			    var flagPhone=false
			    var flagAllow=true
			
			    // 找到所在标签元素
			    var $user_name = $('#user_name')
			    var $pwd=$('#pwd')
			    var $cpwd=$('#cpwd')
			    var $phone=$('#phone')
			    var $allow=$('#allow')
			    var $submit=$('#myform')
			
			    // 1.如果失去焦点，则进行检查判断用户名是否合法
			    $user_name.blur(function () {
			        // 封装函数 调用函数
			        fnCheckUser()
			    })
			    function fnCheckUser() {
			        // 获取用户输入的数据
			        var vals = $user_name.val()
			        // 正则，正则验证用户输入的数据是否合法
			        var re = /^\w{8,18}$/
					msg=document.getElementById("span1")
			        if (vals == '') {
			            msg.innerHTML="用户名不能为空"
						msg.style.color="red"
			            flagUser=false
			            return
			        }
			        if (re.test(vals)) {
			            msg.innerHTML="用户名合法"
						msg.style.color="red"
			            flagUser=true
			        } else {
			            // 不合法 -- 报错 -- 下面的span标签显示
			            msg.innerHTML="用户名是8-18位数字、字母和下划线！"
						msg.style.color="red"
			            flagUser=false
			        }
			    }
			
			        // 2.如果密码框失去焦点，则进行检查判断密码是否合法
			    $pwd.blur(function(){
			        // 封装函数，调用函数
			        fnCheckPwd()
			    })
			    function fnCheckPwd(){
			        // 获取密码框输入的数据
			        var vals=$pwd.val()
			        // 密码正则匹配表达式
			        var rePass = /^\w{6,16}$/
			        // 如果输入框为空，则提示不能为空并return
					msg=document.getElementById("span2")
			        if (vals==''){
			            msg.innerHTML='密码不能为空'
						msg.style.color="red"
			            flagPwd=false
			            return
			        }
			        // 正则验证密码输入是否合法
			        if(rePass.test(vals))
			        {
			            msg.innerHTML='密码合法'
			            msg.style.color="red"
			            flagPwd=true
			        }
			        else
			        {
			            // 如果匹配失败，则显示span标签，替换提示信息
			            msg.innerHTML='密码为6-16位字母数字'
			            msg.style.color="red"
			            flagPwd=false
			        }
			    }
			
			    // 3.判断两次输入的密码是否一致
			    $cpwd.blur(function(){
			        // 封装函数，调用函数
			        fnCheckCpwd()
			    })
			    function fnCheckCpwd(){
			        // 获取重复密码框输入的数据
			        var vals=$pwd.val()
			        var cvals=$cpwd.val()
					msg=document.getElementById("span3")
			        if(cvals==''){
			            msg.innerHTML='重复密码框不能为空'
						msg.style.color="red"
			            flagCpwd=false
			            return  
			        }
			        if (vals==cvals){
			            msg.innerHTML='确认密码成功'
			            msg.style.color="red"
			            flagCpwd=true
			        }
			        else{
			            msg.innerHTML='两次输入密码不一致，请重新输入'
			            msg.style.color="red"
			            flagCpwd=false
			            return
			        }
			    }
			
			    // 4.如果手机框失去焦点，则进行检查判断手机是否合法
			    $phone.blur(function(){
			        // 封装函数，调用函数
			        fnCheckPhone()
			    })
			    function fnCheckPhone(){
			        // 获取手机框输入的数据
			        var vals=$phone.val()
			        // 手机号正则匹配表达式
			        var rePhone = /^1\d{10}$/
			        // 如果输入框为空，则提示不能为空并return
					msg=document.getElementById("span4")
			        if (vals==''){
			            msg.innerHTML='手机号不能为空'
						msg.style.color="red"
			            flagPhone=false
			            return
			        }
			        // 正则验证手机号输入是否合法
			        if(rePhone.test(vals))
			        {
			            msg.innerHTML='手机号合法'
			            msg.style.color="red"
			            flagPhone=true
			        }
			        else
			        {
			            // 如果匹配失败，则显示span标签，替换提示信息
			            msg.innerHTML='手机号为1开头的11位数字'
			            msg.style.color="red"
			            flagPhone=false
			        }
			    }
			    
			    
			     // 5.点击同意协议复选框，判断是否勾选。如果勾选，则隐藏提示信息，没有勾选，则显示报错信息
			     $allow.click(function(){
			         fnCheckAllow()
			        })
			    // 封装函数
			    function fnCheckAllow(){
			        if($allow.prop('checked'))
			         {
			            $allow.next().next().hide()
			            flagAllow=true
			         }
			         else
			         {
			             $allow.next().next().show().html("请勾选同意协议")
			             flagAllow=false
			         }
			    }
			
			    // 6.所有输入框验证通过再提交注册
			    $submit.submit(function(){
			        if(flagUser && flagPwd && flagCpwd && flagPhone && flagAllow){
			            alert('恭喜你注册成功！')
			        }
			        else{
			            alert("很遗憾，注册失败")
			            return false
			        }
			    })
			})

		</script>
	</head>
	<body>
		
		<form id='myform'>
			<fieldset>
			    <legend >用户注册界面</legend>
				<p>
					<label>用户名:</label>
					<input type="text" name="user_name" id="user_name">
					<span id="span1"></span>
				</p>					
				<p>
					<label>密码:</label>
					<input type="password" name="pwd" id="pwd">
					<span id="span2"></span>
				</p>
				<p>
					<label>确认密码:</label>
					<input type="password" name="cpwd" id="cpwd">
					<span id="span3"></span>
				</p>
				<p>
					<label>手机号:</label>
					<input type="text" name="phone" id="phone">
					<span id="span4"></span>
				</p>
				<p class="agreement">
					<input type="checkbox" name="allow" id="allow" checked="checked">
					<label>同意用户使用协议</label>
					<span class="error_tip2"></span>
				</p>
				<p class="reg_sub">
					<input type="submit" value="注 册" name="">
				</p>
			</fieldset>				
		</form>
	</body>
</html>
